<template>
  <!--程序主框架-->
  <div>

    <el-container>
      <el-aside class="aside" width="15%">
        <center>
          <div class="aside_userImg">
            <img :src="this.$store.state.userContext.userImg"
                 style="width: 100%;height: 100%;border-radius: 100px">
          </div>
          <div class="userRole">
            <span class="Role">
              {{ this.$store.state.userContext.userRole === 'superAdmin' ? '超级管理员' :
              this.$store.state.userContext.userRole === 'admin'? '管理员':'普通用户'}}
            </span>
          </div>
        </center>
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            background-color="#ffffff00"
            @close="handleClose">
          <el-menu-item index="1" @click="openNoteList"
                        :disabled="this.$store.state.elMenuTitle1.isDisable === 0">
            <i :class="this.$store.state.elMenuTitle1.iconClass"></i>
            <span slot="title">{{ this.$store.state.elMenuTitle1.title }}</span>
          </el-menu-item>
          <el-menu-item index="2" @click="openProfile"
                        :disabled="this.$store.state.elMenuTitle2.isDisable === 0">
            <i :class="this.$store.state.elMenuTitle2.iconClass"></i>
            <span>{{ this.$store.state.elMenuTitle2.title }}</span>
          </el-menu-item>
          <el-menu-item index="3" @click="openPicture"
                        :disabled="this.$store.state.elMenuTitle3.isDisable === 0">
            <i :class="this.$store.state.elMenuTitle3.iconClass"></i>
            <span slot="title">{{ this.$store.state.elMenuTitle3.title }}</span>
          </el-menu-item>
          <el-menu-item index="5" @click="openTable"
                        :disabled="this.$store.state.elMenuTitle5.isDisable === 0"
                        v-if="this.$store.state.userContext.userRole==='superAdmin'">
            <i :class="this.$store.state.elMenuTitle5.iconClass"></i>
            <span slot="title">{{ this.$store.state.elMenuTitle5.title }}</span>
          </el-menu-item>
          <el-menu-item index="4" @click="openSetting"
                        v-if="this.$store.state.userContext.userRole==='admin' ||
                        this.$store.state.userContext.userRole==='superAdmin'">
            <i :class="this.$store.state.elMenuTitle4.iconClass"></i>
            <span slot="title">{{ this.$store.state.elMenuTitle4.title }}</span>
          </el-menu-item>
        </el-menu>

      </el-aside>
      <el-container class="main">
        <el-header class="main_heard">
          <div class="daoHang">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item style="font-weight: bold">
                {{ this.$store.state.noteList.appTitle }}
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="showNoteList">
                {{ this.$store.state.elMenuTitle1.title }}
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="showProfileView">
                {{ this.$store.state.elMenuTitle2.title }}
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="showPicture">
                {{ this.$store.state.elMenuTitle3.title }}
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="showSetting">
                {{ this.$store.state.elMenuTitle4.title }}
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="showUser">
                {{ this.$store.state.elMenuTitle5.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!--个人信息-->
          <div class="userInfo">
            <span>{{ this.$store.state.userContext.name }}</span>
          </div>
          <div class="userImg">
            <el-dropdown @command="handleCommand">
              <img :src="this.$store.state.userContext.userImg"
                   style="width: 100%;height: 100%;border-radius: 50px">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-setting"
                                  command="openPwdSetting">修改密码
                </el-dropdown-item>
                <el-dropdown-item command="exit"
                                  icon="el-icon-circle-close">
                    退出登陆
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
        </el-header>
        <el-main class="main_bottom">
          <!--日历-->
          <user-note-list v-if="showNoteList"/>
          <!--个人信息界面-->
          <profile-view v-if="showProfileView"/>
          <!--图表界面-->
<!--          <user-picture v-if="showPicture"/>-->
          <new-picture v-if="showPicture"/>
          <!--设置界面-->
          <user-setting v-if="showSetting"/>
          <!--用户表格界面-->
          <user-table v-if="showUser"/>
          <!--修改密码界面-->
          <div v-if="showUpdatePwd">
            <change-pwd/>
          </div>
        </el-main>
        <el-footer class="main_footer">
          <bei-an style="color: #303133"></bei-an>
        </el-footer>
      </el-container>

    </el-container>

  </div>
</template>

<script>
import {Container, Header, Aside, Main, Dialog, Dropdown, DropdownItem, DropdownMenu, Steps, Step} from 'element-ui';
import loginUtils from '../../plugins/login'
import UserNoteList from "@/components/calendars/userNoteList";
import UserProfile from "@/components/function/userProfile";
import ProfileView from "@/views/function/profileView";
import UserPicture from "@/components/function/userPicture";
import UserSetting from "@/components/function/userSetting";
import ChangePwd from "@/components/function/changePwd";
import pubsub from 'pubsub-js'
import UserTable from "@/components/function/userTable";
import NewPicture from "@/components/function/newPicture";
import BeiAn from "@/components/footer/beiAn";
export default {
  name: "mainEntrance",
  components: {
    BeiAn,
    NewPicture,
    UserTable,
    ChangePwd,
    UserSetting,
    UserPicture,
    ProfileView,
    UserProfile,
    UserNoteList,
    Container,
    Header,
    Aside,
    Main,
    Dialog,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Step,
    Steps,
  },
  data() {
    return {
      dialogVisible: false,
      showNoteList: true,  //展示日程界面
      showProfileView: false, //展示个人界面
      showPicture: false, //展示图表界面
      showSetting: false, //展示设置界面
      showUpdatePwd: false, //是否展示密码修改界面
      showUser: false, //是否展示用户表格界面
      elMenuOptions: [], //左边菜单界面
      token: "",
      profile:{
        userid: '',
        userImg: '', //用户头像地址
        name: '', //用户昵称
        username: '', //用户账号
        userEmail: '', //用户邮箱
        userTel: '', //用户联系方式
        userRole: '', //用户角色
      }
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //展示清单
    openNoteList() {
      this.showNoteList = true
      this.showProfileView = !this.showNoteList
      this.showPicture = !this.showNoteList
      this.showSetting = !this.showNoteList
      this.showUser = !this.showNoteList
    },
    //展示个人界面
    openProfile() {
      this.showProfileView = true
      this.showNoteList = !this.showProfileView
      this.showPicture = !this.showProfileView
      this.showSetting = !this.showProfileView
      this.showUser = !this.showProfileView
    },
    //展示图表界面
    openPicture() {
      this.showPicture = true
      this.showNoteList = !this.showPicture
      this.showProfileView = !this.showPicture
      this.showSetting = !this.showPicture
      this.showUser = !this.showPicture
    },
    //展示设置界面
    openSetting() {
      this.showSetting = true
      this.showNoteList = !this.showSetting
      this.showProfileView = !this.showSetting
      this.showPicture = !this.showSetting
      this.showUser = !this.showSetting
    },
    //展示设置界面
    openTable() {
      this.showUser = true
      this.showNoteList = !this.showUser
      this.showProfileView = !this.showUser
      this.showPicture = !this.showUser
      this.showSetting = !this.showUser
    },
    //打开修改密码界面
    handleCommand(command) {
      if (command === 'openPwdSetting')
        this.showUpdatePwd = true
      else if (command === 'exit'){
        loginUtils.clearCookie(); //清空cookie
        this.$router.push("/login")
        this.$message.success("退出成功!")
      }
    },
    //获取COOKIE里面的用户对象
    getUserContextByCookie() {
      let userToken = "null";
      if (document.cookie.length > 0) {
        // 通过分号(;)作为分割符cookie字符串
        let arr = document.cookie.split(";");
        for (let index = 0; index < arr.length; index++) {
          let items = arr[index].split("=");
          if (items.length > 2) {
            let temp = arr[index].split(items[1])
            items[1] = items[1] + temp[1];
          }
          if (items[0].replace(/\s*/g, "") === "token") {
            userToken = items[1]
          }
        }
      }
      this.$store.commit("setToken",userToken);
      this.$axios({
        url: '/noteUser/queryUserByToken/' + this.$store.state.token,
      }).then(response => {
        this.$store.commit("setUserContext",response.data)
        //根据用户编号判断用户是否存在
        if (this.$store.state.userContext.userid === undefined || this.$store.state.userContext.userid === '' ||
            this.$store.state.userContext.userid === null){
          this.$message.error("请先登陆...")
          this.$router.push("/login");
        }else{
          this.elMenuOptions = this.$store.state.elMenuOptions
          this.inputEmail = this.$store.state.userContext.userEmail
        }
      })
    },

  },
  mounted() {
    this.getUserContextByCookie();
    pubsub.subscribe("closeDialog",(e,message)=>{
      this.showUpdatePwd = message
    })

  }
}
</script>

<style scoped>
.aside {
  height: 100%;
  /*background-color: #fff;*/
  position: fixed;
  border-right: 1px solid #ccc;
}

.main {
  width: 90%;
  height: 100%;
  /*background-color: aquamarine;*/
  position: fixed;
  left: 15%;
}

.main_heard {
  width: 100%;
  height: 10%;
  /*background-color: aqua;*/
  float: left;
  border-bottom: 1px solid #ccc;
}

.main_bottom {
  width: 100%;
  height: 90%;
  /*background-color: chartreuse;*/
  float: left;
}

.daoHang {
  width: 80%;
  height: 100%;
  float: left;
  padding: 20px;
  /*background-color: #ff4400;*/
}

.userInfo {
  width: 10%;
  height: 100%;
  float: left;
  font-size: 14px;
  color: #606266;
  text-align: right;
  line-height: 55px;
  padding-right: 10px;
  /*background-color: aqua;*/
}

.userImg {
  width: 50px;
  height: 50px;
  float: left;
  border-radius: 50px;
  margin-top: 4px;
  margin-left: 10px;
  background-color: aquamarine;
}

.aside_userImg {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin: 5px 50px;
  border-radius: 100px;
}

.userRole {
  width: 100%;
  height: 30px;
  /*background-color: #ffcdd2;*/
  margin-bottom: 20px;
  border-bottom: 1px solid #cccccc;
}

.Role {
  color: #606266;
  font-size: 15px;
  text-align: left;
}
.iconStyle{
  width: 15px;
  height: 15px;
}
.main_footer{
  border-top: 1px solid #cccccc;
}

</style>
